<template>
	<tm-app class="container">
		<tm-sheet :height="320" :margin="[0]" :padding="[0]" class="building">
			<tm-sheet :margin="[0]" _style="background: rgba(0, 0, 0, 0);" :padding="[0]" :height="300"
				_class="flex flex-col flex-center">

				<tm-text color="white" :font-size="44" _class="text-weight-b"
					:label="orderInfo.status==0?'订单已取消':orderInfo.status==1?'转入成功':'已售出'"></tm-text>
				<tm-text color="#949494" :font-size="25" style="margin-top: 10rpx;"
					:label="orderInfo.status==1?'请前往我的藏品中查看':''"></tm-text>
				<tm-sheet :margin="[0]" :padding="[0]" _class="flex flex-row flex-center"
					_style="background: rgba(0, 0, 0, 0.0);">
				</tm-sheet>
			</tm-sheet>
		</tm-sheet>
		<tm-sheet :margin="[0,-30,0,0]" color="white" :padding="[30]" :height="140" :round="[6,6,0,0]"
			_class="flex flex-row">
			<tm-image :height="140" :width="140" :round="4" :src="orderInfo.cover"></tm-image>
			<tm-sheet _class="flex flex-row flex-between" :width="620" :margin="[0]" :padding="[0]">
				<tm-sheet :margin="[20,0,0,0]" :padding="[0]" _class="flex flex-col flex-col-center-start">
					<tm-sheet :margin="[0]" :padding="[0]" :height="40" _class="flex flex-row flex-row-center-start">
						<tm-text :font-size="28" :label="orderInfo.name"></tm-text>
					</tm-sheet>
					<tm-sheet :margin="[0]" :padding="[0,32,0,0]" _class="flex flex-row flex-row-center-between">
						<tm-text :font-size="26" :label="symbol+orderInfo.code"></tm-text>
						<tm-text :font-size="26" color="#bdbdbd" :label="symbols+orderInfo.publishNum"></tm-text>
					</tm-sheet>
				</tm-sheet>
				<tm-icon :font-size="20" name="tmicon-angle-right"></tm-icon>
			</tm-sheet>
		</tm-sheet>
		<tm-sheet _class="flex flex-row flex-between" :width="750" :margin="[0,20,0,0]" :padding="[30]">
			<tm-sheet :margin="[0]" :padding="[0]" _class="flex flex-col flex-col-center-start">
				<tm-sheet :margin="[0]" :padding="[0]" _class="flex flex-row flex-row-center-start">
					<tm-text :font-size="28" label="订单详情" style="font-weight: bold"></tm-text>
				</tm-sheet>
				<tm-sheet :margin="[0]" :padding="[0]" :width="690" _class="border-b-1">
					<tm-sheet :margin="[0]" :padding="[0,30]" _class="flex flex-row flex-row-center-between">
						<tm-text :font-size="24" color="rgba(0, 0, 0, 0.6)" label="订单金额:"></tm-text>
						<tm-text :font-size="35" _class="text-weight-b" :label="money+orderInfo.amount"></tm-text>
					</tm-sheet>
				</tm-sheet>

				<tm-sheet :margin="[0]" :padding="[0,30,0,0]" :width="690"
					_class="flex flex-row flex-row-center-between">
					<tm-text :font-size="24" color="rgba(0, 0, 0, 0.6)" label="订单ID号:"></tm-text>
					<tm-text :font-size="20" _class="text-weight-b" :label="orderInfo.id"></tm-text>
				</tm-sheet>

			</tm-sheet>


		</tm-sheet>
		<tm-sheet :margin="[0,0,0,0]" :padding="[30,30,30,0]" :width="750" v-if="orderInfo.status==0">
			<tm-sheet :margin="[0]" :padding="[0]" :height="45">
				<tm-text :font-size="28" label="说明" style="font-weight: bold"></tm-text>
			</tm-sheet>
			<tm-sheet :margin="[0,20]" :padding="[0]">
				<tm-text :font-size="22" label="1.超时未支付订单，系统会自动取消。"></tm-text>
			</tm-sheet>

			<tm-sheet :margin="[0,20]" :padding="[0]" :width="690">
				<tm-text :font-size="22" label="2.同一账号一段时间内累计取消3次订单，将会被限购一段时间。" style="margin-bottom: 90rpx;"></tm-text>
			</tm-sheet>
		</tm-sheet>

		<tm-sheet :margin="[0,20,0,0]" :padding="[30,30,30,0]" :width="750"
			v-if="orderInfo.status==1 || orderInfo.status==4 ">
			<tm-sheet :margin="[0]" :padding="[0]" :height="45">
				<tm-text :font-size="28" label="订单状态" style="font-weight: bold"></tm-text>
			</tm-sheet>
			<tm-timeline style="margin-left: -30rpx;">
				<tm-timeline-item color="#8E8E90" :size="32" type="fill" icon="tmicon-check" style="margin-top: 40rpx;">
					<tm-text :font-size="28" color="#8E8E90" label="支付成功,藏品转入中"></tm-text>
				</tm-timeline-item>

				<tm-timeline-item color="green" :size="32" type="fill" icon="tmicon-check" :font-size="24">

					<tm-text :font-size="28">藏品转入成功 ({{orderInfo.createTime}})</tm-text>
				</tm-timeline-item>
			</tm-timeline>
		</tm-sheet>




		<tm-sheet :margin="[0,0,0,0]" :padding="[30,30,30,0]" :width="750">

			<view style="position: fixed;bottom:0;" class="flex flex-row flex-wrap">
				<tm-button :height="70" label="我的藏品" color="#949494" :round="5" style="margin-left: 10rpx;">
				</tm-button>
				<tm-button :height="70" :linear-color="['#1b1b1b', '#989898']" font-color="white" linear="left"
					color="#1b1b1b" :round="5" :shadow="0" size="large" label="继续购买" style="margin-left: 80rpx;">
				</tm-button>
			</view>

		</tm-sheet>




	</tm-app>
</template>

<script>
	export default {
		data() {
			return {
				money: "￥",
				symbol: "#",
				symbols: "/",
				orderInfo: {}
			}
		},
		onLoad(options) {
			this.orderInfo = JSON.parse(decodeURIComponent(options.params));
			console.log(this.orderInfo);
		},
		methods: {

		}
	}
</script>

<style>
	.building {
		background: url("../../static/image/tabbar/order.png") center;
		width: 100%;
		background-size: 100%;

	}

	.bottom-btn {
		width: 100%;
		align-self: flex-end;
		/* 使该元素在交叉轴（垂直方向）的尾部对齐 */

		/* 可根据需要设置底部边距 */
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		/* 设置容器高度为视窗高度，确保内容能填充满屏幕 */
	}
</style>